```tsx
import * as tour from "@zag-js/tour"
import { useMachine, normalizeProps } from "@zag-js/solid"
import { For, Show, createMemo, createUniqueId } from "solid-js"
import { Portal } from "solid-js/web"

function Tour() {
  const service = useMachine(tour.machine, { id: createUniqueId(), steps })
  const api = createMemo(() => tour.connect(service, normalizeProps))

  return (
    <div>
      <div>
        <button onClick={() => api().start()}>Start Tour</button>
        <div id="step-1">Step 1</div>
      </div>

      <Show when={api().open && api().step}>
        <Portal>
          <Show when={api().step.backdrop}>
            <div {...api().getBackdropProps()} />
          </Show>
          <div {...api().getSpotlightProps()} />
          <div {...api().getPositionerProps()}>
            <div {...api().getContentProps()}>
              <Show when={api().step.arrow}>
                <div {...api().getArrowProps()}>
                  <div {...api().getArrowTipProps()} />
                </div>
              </Show>
              <p {...api().getTitleProps()}>{api().step.title}</p>
              <div {...api().getDescriptionProps()}>
                {api().step.description}
              </div>

              <div>
                <For each={api().step.actions}>
                  {(action) => (
                    <button {...api().getActionTriggerProps({ action })}>
                      {action.label}
                    </button>
                  )}
                </For>
              </div>

              <button {...api().getCloseTriggerProps()}>X</button>
            </div>
          </div>
        </Portal>
      </Show>
    </div>
  )
}

const steps: tour.StepDetails[] = [
  {
    type: "dialog",
    id: "start",
    title: "Ready to go for a ride",
    description: "Let's take the tour component for a ride and have some fun!",
    actions: [{ label: "Let's go!", action: "next" }],
  },
  {
    id: "logic",
    title: "Step 1",
    description: "This is the first step",
    target: () => document.querySelector("#step-1"),
    placement: "bottom",
    actions: [
      { label: "Prev", action: "prev" },
      { label: "Next", action: "next" },
    ],
  },
  {
    type: "dialog",
    id: "end",
    title: "Amazing! You got to the end",
    description: "Like what you see? Now go ahead and use it in your project.",
    actions: [{ label: "Finish", action: "dismiss" }],
  },
]
```
